<template>
  <div class="box">
    <div class="fold">
      <label for="burger" class="burger">
        <input id="burger" type="checkbox" @click="fold" >
        <span></span>
        <span></span>
        <span></span>
      </label>
    </div>
    <el-divider class="divider" />
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
    >
      <div v-if="isCollapse" class="subjectdiv">
        <div class="title">
          <span>题目列表</span>
        </div>
        <div class="subject">
          <div class="subjectid" v-for="(i,index) in 10">
            <el-button class="subject_but i">{{i}}</el-button>
          </div>
        </div>

      </div>
    </el-menu>
  </div>
</template>

<script>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

export default {
  data() {
    return {};
  },
  name: 'LeftMenu',
  components: {
  },
  setup(){
    const isCollapse = ref(true)
    const fold = () => {
      isCollapse.value=!isCollapse.value;
      let leftBox = document.getElementById("twoleft");
      let rightBox = document.getElementById("tworight");
      let box = document.getElementById("twoBox");
      let menu = document.getElementById("menu");
      leftBox.style.width = (box.clientWidth - 30 - 5 - rightBox.clientWidth) + 'px';
      // rightBox.style.width = (box.clientWidth - 30 - 5 - leftBox.clientWidth) + 'px';
    }
    return{
      isCollapse,
      fold,
    }
  }
};
</script>

<style scoped>
html,body{
  height:100%
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 30px;
  background-color: RGB(246,247,249);
}
.el-menu-vertical-demo{
  height: 615px;
  width: 250px;
}
.box,.subjectdiv,.el-menu-vertical-demo{
  background-color: RGB(246,247,249);
}
.subject_but{
  width: 32px;
  height: 32px;
  margin: 6px;
}
.subjectid{
  display: inline;
}
.subject{
  padding: 15px;
  margin: 20px;
  border-radius: 10%;
  background-color: white;
}
.fold{
  background-color: white;
  text-align:center;
  cursor:pointer;
}
.title{
  padding: 10px;
}
.divider{
  margin: 0;
}

.burger {
  position: relative;
  width: 30px;
  height: 30px;
  background: transparent;
  cursor: pointer;
}

.burger input {
  display: none;
}

.burger span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: RGB(214,214,214);
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.burger span:nth-of-type(1) {
  transform: rotate(45deg);
  top: 15px;
}

.burger span:nth-of-type(2) {
  width: 0%;
  opacity: 0;
}

.burger span:nth-of-type(3) {
  transform: rotate(-45deg);
  top: 15px;
}

.burger input:checked ~ span:nth-of-type(1) {
  transform: rotate(0);
  top: 20%;
  transform-origin: left center;
}

.burger input:checked ~ span:nth-of-type(2) {
  top: 60%;
  opacity: 1;
  width: 100%;
  transform: translateY(-50%);
  transform-origin: left center;
}

.burger input:checked ~ span:nth-of-type(3) {
  top: 100%;
  transform-origin: left center;
  transform: translateY(-100%);
}
</style>
